/*实现头部分的样式*/
.nav{
	width:100%;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:16px;
	color:#777;
	/*谷歌、苹果、欧朋*/
	/*火狐颜色渐变*/
	background:-moz-linear-gradient(top,#FDF0DF,#FBF3E7);
	/*IE颜色渐变*/
	background:
			-ms-linear-gradient(top,#FDF0DF,#FBF3E7);
	/*谷歌、苹果、欧朋颜色渐变*/
	background:-webkit-gradient(linear,0 0,0 100%, from(#FDF0DF),to(#FBF3E7));
/*子层做绝对定位，父层要先做相对定位*/
	position:relative;}

/*实现头部分左边的超链接绝对定位，显示背景图片，三个步骤*/
.nav .goback{
	/*1、先将超链接位置固定*/
	position:absolute;
	top:15px;
	left:15px;
/*2、实现背景图片显示的区域，也就是超链接的宽度和高度*/
	width:23px;
	height:18px;
/*3、实现背景图片，设置本身背景图片的大小*/
     background:url(../images/arrow_header.png) no-repeat 0 0;
/*因为背景图片要铺满整个超链接，背景图片本身大于超链接的大小，所以用contain去缩小背景图片，铺满超链接*/
	 background-size:contain;}

/*头部分右边*/
.nav .home{
	/*1、先将超链接位置固定*/
	position:absolute;
	top:15px;
	right:15px;
/*2、实现背景图片显示的区域，也就是超链接的宽度和高度*/
	width:18px;
	height:22px;
/*3、实现背景图片，设置本身背景图片的大小*/
     background:url(../images/icon-home.png)
	   no-repeat 0 0;
/*因为背景图片要铺满整个超链接，背景图片本身大于超链接的大小，所以用contain去缩小背景图片，铺满超链接*/
	 background-size:contain;}

/*实现中间正文的样式*/
.layout{
	width:320px;
	margin:10px auto;}
/*将无序列表从竖排变横排*/
.layout li{
	float:left;
	width:145px;
	margin-left:10px;
	background-color:#F5F5F5;
	margin-bottom:10px;}

.layout img{
	width:145px;
	height:145px;}
/*实现段落的样式，设置高度，将多余的文字隐藏*/
.layout p{
	width:135px;
	padding:5px;
	height:28px;
	/*将文字溢出的部分隐藏*/
	overflow:hidden;}

.layout .snPrice{
	color:red;
	font-size:15px;
	padding:5px;}

/*清除浮动*/
.layout:after{
	content:'';
	display:block;
	clear:both;
	visibility:hidden;}



